<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'black',
    navigationBarTitleText: '历史食谱',
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="历史食谱"></cu-navbar>
    <view class="cu-flex">
      <view v-if="recipeList.length" class="content">
        <cu-card v-for="(item, index) in recipeList" :key="index" margin="15rpx 0 ">
          <view class="flex">
            <view class="left">
              <view class="ellipsis title">
                {{ item?.recipeName ? item.recipeName : index == 0 ? '本周食谱' : index == 1 ? '下周食谱' : '上周食谱' }}
              </view>
              <view class="moreBtn flex flex-items-center" @click="lookMore(item)">
                <p>查看更多</p>
                <uv-icon name="arrow-right" color="#969799" size="16"></uv-icon>
              </view>
            </view>
            <view class="flex flex-items-center">
              <uv-icon
                name="tianchong_fuben3"
                custom-prefix="custom-icon"
                color="#FF363F"
                size="27"
              ></uv-icon>
              <p class="heat">
                {{ item?.heat || 0 }}
              </p>
            </view>
          </view>
        </cu-card>
      </view>
      <view v-else>
        <cu-empty></cu-empty>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reqHistoryRecipe } from '@/service/business/goods'
import { useUserStore } from '@/store'
const userStore = useUserStore()

const recipeList = ref([])
// 获取食谱列表
const getHistoryRecipe = () => {
  const { kitchenId } = userStore.userInfo.user
  reqHistoryRecipe({ kitchenId }).then((res) => {
    if (res.retCode == 2000) {
      recipeList.value = res.data || []
    }
  })
}

const lookMore = (item) => {
  if (!item) {
    uni.showToast({
      title: '暂无更多内容',
      icon: 'none',
      mask: true,
    })
    return false
  }
  console.log(item)
  uni.navigateTo({
    url:
      '/packageOne/pages/historicalRecipes/recipeDetail?id=' +
      item.recipeId +
      '&start=' +
      item.beginTime +
      '&end=' +
      item.endTime,
  })
}
onMounted(() => {
  getHistoryRecipe()
})
</script>

<style lang="scss" scoped>
//

.content {
  box-sizing: border-box;
  width: 100%;
  padding: 24rpx 24rpx 60rpx;
  overflow: auto;

  .left {
    width: 77%;
    margin-right: 6%;
    .title {
      font-weight: 600;
      font-size: 31rpx;
      color: #111111;
      line-height: 46rpx;
    }
  }

  .moreBtn {
    font-weight: 400;
    font-size: 27rpx;
    color: #969799;
    line-height: 42rpx;
  }
  .heat {
    font-weight: 400;
    font-size: 27rpx;
    color: #323233;
    line-height: 42rpx;
    margin-left: 6rpx;
  }
}
</style>
